@extends('layouts.mobile')

@section('title', '产销信息发布')
@section('styles')
    <link href="{{asset('mui/css/mui.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('css/previewimage.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('layui/css/layui.css')}}" rel="stylesheet" type="text/css">
    <style type="text/css">
        .mui-table-view {
            padding: 20px 0px;
            margin-bottom: 36px;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > label {
            padding: 13px 0px;
            width: 20%;
        }

        .mui-table-view > .mui-table-view-cell {
            padding: 0px 15px;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > input {
            width: 75%;
            border-bottom: 1px solid #ccc;
        }

        .mui-table-view > .mui-table-view-cell > .mui-input-row > textarea {
            width: 75%;
            border: 1px solid #ccc;
            padding: 4px;
        }

        .mui-btn {
            position: fixed;
            bottom: 0px;
            width: 100%;
        }

        .image_list {
            width: 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .image_list > img {
            margin: 5px 5px;
            width: 64px;
            height: 64px;
        }

        input[type=file] {
            display: none;
        }

        .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }

        .mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item) {
            line-height: 30px !important;
        }

        .mui-preview-header {
            z-index: -999;
        }
    </style>
@stop
@section('content')
    <form class="layui-form layui-form-pane" action="">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>信息标题</label>
                    <input type="text" name="title" lay-verify="required" class="mui-input-clear"
                           placeholder="请输入一个具有吸引力的标题">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>产品产地</label>
                    <input type="text" name="area" lay-verify="required" class="mui-input-clear"
                           placeholder="省、市、区、县、乡镇">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>当前产量</label>
                    <input type="text" name="production" lay-verify="required" class="mui-input-clear"
                           placeholder="例如：10吨">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>产品单价</label>
                    <input type="text" name="unit_price" lay-verify="required" class="mui-input-clear"
                           placeholder="例如：25">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>产品单位</label>
                    <input type="text" name="unit" lay-verify="required" class="mui-input-clear"
                           placeholder="例如：吨、斤、件......">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>已销售</label>
                    <input type="text" name="has_pin" lay-verify="required" class="mui-input-clear"
                           placeholder="当前已销售的产量">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>联系电话</label>
                    <input type="text" name="contact_phone" lay-verify="required" class="mui-input-clear"
                           placeholder="请输入您的联系电话">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>联系人</label>
                    <input type="text" name="contact_people" lay-verify="required" class="mui-input-clear"
                           placeholder="请输入您的称呼">
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label>产品描述</label>
                    <textarea name="product_desc" lay-verify="required" rows="5" placeholder="请用精彩的言语介绍你的产品"></textarea>
                </div>
            </li>
            <input type="hidden" v-model="product_images" lay-verify="required" name="product_images">
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label style="padding: 10px 0px 0px 0px">产品图片</label>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-input-row">
                    <label></label>
                    <div class="image_list">
                        <img :data-preview-src="item" v-for="item in images" :src="item" data-preview-group="1">
                        <div id="file" style="position: relative" style="background-color: rgba(255,255,255,1);height: 64px;padding: 0px;">
                            <img src="/images/common/created_image.png">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <button style="border: none;height: 45px;line-height: 45px;" type="button" lay-submit="" lay-filter="subForm"
                class="mui-btn mui-btn-danger">立即发布
        </button>
    </form>
    <script src="{{asset('layui/layui.js')}}" type="text/javascript"></script>
    <script src="{{asset('webuploader/webuploader.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.previewimage.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.zoom.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use(['element', 'jquery', 'layer', 'form', 'upload'], function () {
            var element = layui.element,
                $ = layui.jquery,
                layer = layui.layer,
                form = layui.form,
                upload = layui.upload;
            mui.previewImage();
            setInterval(function () {
                if ($(".mui-preview-image").css("display") == 'block') {
                    if (!$(".mui-slider-group .mui-slider-item a").length) {
                        $(".mui-slider-group .mui-slider-item .mui-zoom-scroller").after("<a href='' style='position: absolute;top: 12px;color: #FF5722;right: 20px;height: 30px;' class='deletedImg'>删除</a>");
                    }
                }
            }, 1000)
//            $(".mui-slider-group .mui-slider-item").after("<a href=''>删除</a>");
            var vm = new Vue({
                el: '#app',
                data: {
                    images: [],
                    product_images: ""
                },
                mounted: function () {

                },
                methods: {}
            });
            mui.init({
                gestureConfig: {
                    longtap: true, //默认为false
                    release: true,
                    doubletap: true
                }
            });
            var uploader = WebUploader.create({
                auto:true,
                server:"{{url('mobile/news/uploads')}}",
                pick:"#file",
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,png',
                    mimeTypes: 'image/*'
                },
                fileVal:"file",
                formData:{'_token':'{{csrf_token()}}'}
            })
            var load;
            uploader.on( 'uploadProgress', function( file, percentage ) {
                load = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            });
            uploader.on( 'uploadSuccess', function( file , res) {
                console.log(res)
                let image = vm.images
                image.push(res.fileName)
                vm.images = image
                vm.product_images = vm.images.join(";")
                layer.close(load)
            });
            // $("#file").fileupload({
            //     dataType: 'json',
            //     url: "{:U('setFile')}",//文件的后台接受地址
            //     //设置进度条
            //     progressall: function (e, data) {
            //         var progress = parseInt(data.loaded / data.total * 100);
            //         $('#progress .bar').css(
            //             'width',
            //             progress + '%'
            //         );
            //     },
            //     //上传完成之后的操作，显示在img里面
            //     done: function (e, data){
            //         $("#uploadimg").attr({src: data.result.pic_url});
            //         $("#uploadimg").css({width: "400px", height: "400px"});
            //     }
            // })
            {{--upload.render({--}}
                {{--elem: '#hidden-file'--}}
                {{--, url: "{{url('mobile/news/uploads')}}"--}}
                {{--, multiple: true--}}
                {{--, done: function (res) {--}}
                    {{--let image = vm.images--}}
                    {{--image.push(res.fileName)--}}
                    {{--vm.images = image--}}
                    {{--vm.product_images = vm.images.join(";")--}}
                {{--}, error: function (index) {--}}
                    {{--alert(index)--}}
                {{--}--}}
            {{--});--}}
            mui(".image_list").on('doubletap', "img", function () {
                return false;
            });
            $(document).on("click", ".deletedImg", function () {
                let images = $("input[name='product_images']").val();
                let thisImg = $(this).siblings(".mui-zoom-scroller").find("img").attr("src");
                console.log(thisImg)
                images = images.split(";");
                let newImg = [];
                let index = 0;
                for (var i = 0; i < images.length; i++) {
                    if (images[i] != thisImg) {
                        newImg[index] = images[i];
                        index++;
                    }
                }
                vm.images = newImg
                vm.product_images = vm.images.join(";")
            })
            //监听提交
            form.on('submit(subForm)', function (data) {
                $.ajax({
                    type: "POST",
                    url: "{{url('mobile/news/created')}}",
                    dataType: "json",
                    data: data.field,
                    success: function (res) {
                        if (res.code && res.code == 200) {
                            layer.msg(res.msg, function () {
                                window.history.go(-1);
                            })
                        } else {
                            layer.msg(res.msg)
                        }
                    }
                })
                return false;
            });
            $("#upFile").click(function () {
                $("#hidden-file").click();
            })
        });
    </script>
@stop